<template>
  <!-- 上传 -->
  <div class="qrcode-container">
    <div class="backbar fix-bar">
      <div class="back flex-center" v-hammer:tap="(ev) => $router.go(-1)">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
    </div>

    <div class="image-list-wrapper">
      <div style="padding-top: 12px" v-if="imageList.length == 0">
        没有图片
      </div>
      <ul class="image-list" :style="{height: listHeight}">
        <li
          draggable
          class="list-item"
          v-for="(item, i) of imageList"
          :key="i"
          v-hammer:tap="(ev) => onImageClicked(ev, item)"
        >
          <img :src="item.imageUrl" alt />
        </li>

      </ul>
    </div>

    <!-- <div class="action-bar elevation-1 flexbox justify-end" @drop="onDrop">
      <div class="item">
        <span>删除</span>
      </div>
    </div> -->

    <!-- 发送图片之前的预览 -->
    <send-image-preview
      v-if="showImagePreview"
      :image="imageBase64"
      :sendText="sendText"
      :bgColor="bgColor"
      @cancel="onCancelImage"
      @send="onCancelImage"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Mutation, Getter, namespace } from 'vuex-class';
import { RawLocation } from "vue-router";
import { MsgTypeKV } from '@/api/socket/imClient';
import MessageMixin from '@/mixins';
import { Webim } from '@/utils/types';
import { Api } from '@/api/http';
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace('chatModule');
const userModule = namespace('userModule');

@Component<Album>({
  mixins: [MessageMixin],
})
export default class Album extends Vue {
  @chatModule.State("groupSetting") groupSetting: any;
  @userModule.State("loginInfo") loginInfo: any;

  private sendText: string = '完成';
  private bgColor: any = '';

  private eventList: Array<string> = [
    "$getImageList",
  ];

  private imageList: Array<any> = [];

  // 0為發送  1 為預覽 可刪除
  private previewType: number = 0;

  // 预览
  private showImagePreview: boolean = false;
  private imageFile: any = null;
  private imageBase64: string = '';
  private info: any = {};
  private selectedImage: any = {};

  // 能否进行编辑
  private allowEdit: boolean = false;
  private allowSend: boolean = true;
  private listHeight: string = '400px';

  /**
   * 生命周期函数
   */
  protected mounted() {
    this.initEvents(this.eventList);

    let userId: any = this.$route.params.userId;

    this.sendMessage(MsgTypeKV.getImageList ,{
      userId,
    });
    this.listHeight = window.innerWidth + 'px'
  }

  private onCancelImage() {
    this.showImagePreview = false;
  }

  private onImageClicked(ev, item) {
    this.imageBase64 = item.imageUrl;
    this.selectedImage = item;
    this.showImagePreview = true;
  }

  /**
   * 长按事件
   */
  private onImagePressed(item) {
    console.error('onImagePressed', item);
  }

  /**
   * 获取到用户qrcode
   */
  private $getImageList(data: any) {
    if (data.result === 0) {
      this.imageList = data.imageList;
    }
  }

}
</script>

<style lang="stylus" scoped>
.qrcode-container
  background #f1f1f1
  width 100% 
  height 100% 
.image-list-wrapper
  display flex 
  justify-content center
  .image-list
    display flex
    justify-content flex-start
    flex-wrap wrap
    padding 8px 
    align-items flex-start
    box-sizing border-box
    align-content flex-start
    li
      margin-top 3%
      margin-left 1.5%
      margin-right 1.5%
      border-radius 2px
      width 30%
      height 30%
      img
        width 90%
        height 90%
        border-radius 4px
      .username 
        font-size 12px
        color #898989
        margin-top 2px

.delete-member
  position relative
  .image-wrapper
    border-radius 4px
    border 1.5px solid #e2e2e2
    height 90%
    img
      width 40%!important

.action-bar
  position fixed 
  width 100% 
  height 56px 
  bottom 0
  left 0
  background #f44336 
  color white
</style>

